<template>
  <div class="selectPar">
    <a-select class="marginRight16"
              v-model="value"
              :style="style"
              :default-value="value"
              :getPopupContainer="(triggerNode) => triggerNode.parentNode">
      <a-select-option v-for="(item, index) in DeviceParamsSD"
                       :key="index"
                       :value="item.name"
                       @click="downClick(item)">
        {{item.name}}
      </a-select-option>
    </a-select>
  </div>
</template>

<script>
export default {
  props: ['downType', 'width', 'ajaxParam'],
  data () {
    return {
      value: ''
    }
  },
  watch: {
    DeviceParamsSD: {
      handler: function (result) {
        this.value = result[0].name
        this.$emit('downClickPar', this.value, this.downType)
      },
      deep: true
    }
  },
  computed: {
    DeviceParamsSD: function () {
      return this.$store.state.moduleSD.DeviceParamsSD
    },
    style: function () {
      if (this.width) {
        return `width:${this.width}`
      } else {
        return 'width:auto'
      }
    }
  },
  mounted () {
    if (this.$store.state.moduleSD.DeviceParamsSD) {
      this.value = this.$store.state.moduleSD.DeviceParamsSD[0].name
    }
  },
  methods: {
    downClick: function (item) {
      this.value = item.name
      this.$emit('downClickPar', this.value, this.downType)
    }
  }
}
</script>

<style lang="less" scoped>
.selectPar {
  position: relative;
}
</style>
